<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 50vw;
            height: 50vh;
            margin: 25vh;
            margin-left: 25vw;
            background: purple;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <pre>
        1，vw、vh、vmin、vmax 的含义
        （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
        视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

        （2）具体描述如下：
        vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
        vh：视窗高度的百分比
        vmin：当前 vw 和 vh 中较小的一个值
        vmax：当前 vw 和 vh 中较大的一个值

        2，vw、vh 与 % 百分比的区别
        （1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
        （2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

        3，vmin、vmax 用处
        做移动页面开发时，如果使用 vw、vh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
        由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致

        二、媒体查询
            存在即覆盖，不存在即添加
    </pre>
</body>
</html>